<template>
  <div class="container">
    <div class="left">
      <el-card class="card statistic-container" shadow="hover">
        <el-row>
          <el-col :span="8" v-for="rate in pathConversionRates" :key="rate.id">
            <el-statistic
              :title="rate.path"
              :value="rate.rate * 100"
              :precision="2"
              suffix="%"
            />
          </el-col>
        </el-row>
      </el-card>
      <el-card class="card funnel-left" shadow="hover">
        <div ref="funnelLeft" style="width: 100%; height: 550px"></div>
      </el-card>
    </div>
    <div class="right">
      <el-card class="card statistic-container" shadow="hover">
        <el-row>
          <el-col
            :span="8"
            v-for="rate in pathConversionRates1212"
            :key="rate.id"
          >
            <el-statistic
              :title="rate.path"
              :value="rate.rate * 100"
              :precision="2"
              suffix="%"
            />
          </el-col>
        </el-row>
      </el-card>
      <el-card class="card funnel-right" shadow="hover">
        <div ref="funnelRight" style="width: 100%; height: 550px"></div>
      </el-card>
    </div>
  </div>
</template>

<script lang="js" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import * as echarts from 'echarts/core';

import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import { FunnelChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { getConversionPercentage, getConversionPercentage1212, getPathConversionRate, getPathConversionRate1212 } from '@/api/index.js';

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent,
  FunnelChart,
  CanvasRenderer
]);

const router = useRouter();
const funnelLeft = ref(null);
const funnelRight = ref(null);
const source = ref(0);

const pathConversionRates = ref([]);
const pathConversionRates1212 = ref([]);

onMounted(async () => {
  const chartLeft = echarts.init(funnelLeft.value);
  const chartRight = echarts.init(funnelRight.value);

  const conversionData = await getConversionPercentage(router);
  const formattedData = conversionData.map(item => ({
    value: item.percentage,
    name: item.stages
  }));

  const optionLeft = createFunnelOption('普通日期转化率', formattedData);
  chartLeft.setOption(optionLeft);

  const conversionData1212 = await getConversionPercentage1212(router);
  const formattedData1212 = conversionData1212.map(item => ({
    value: item.percentage,
    name: item.stages
  }));

  const optionRight = createFunnelOption('双十二转化率', formattedData1212);
  chartRight.setOption(optionRight);

  pathConversionRates.value = await getPathConversionRate(router);
  pathConversionRates1212.value = await getPathConversionRate1212(router);
});

function createFunnelOption(title, data) {
  return {
    title: { text: title },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
      feature: {
        dataView: { readOnly: true },
        restore: {},
        saveAsImage: {}
      }
    },
    legend: {
      data: data.map(item => item.name)
    },
    series: [
      {
        name: title,
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 25,
        width: '80%',
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          position: 'inside',
          formatter: '{b}: {c}%',
          fontSize: 14,
        },
        labelLine: {
          length: 10,
          lineStyle: { width: 1, type: 'solid' }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: { fontSize: 20 }
        },
        data: data
      }
    ]
  };
}
</script>

<style scoped>
.container {
  padding: 40px 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.left,
.right {
  width: 49%;
}

.card {
  margin-bottom: 20px;
}

.el-col {
  text-align: center;
}

.funnel-left,
.funnel-right {
  height: 600px;
}

:deep(.el-statistic__head) {
  font-size: 13px;
}

</style>
